<template>
  <div class="weather-container">
    <weather-bg />
    <title-bar />
    <flex-box vertical justify="space-between" class="height-100vh p-lr-24px">
      <main-info />
      <recent-day-info />
    </flex-box>
    <hour-info />

    <div class="p-lr-24px">
      <divider />

      <other-info />
      <forecast-video />
      <life-info />
    </div>
  </div>
</template>

<script>
import TitleBar from "@/views/weather/component/title-bar/index";
import MainInfo from "@/views/weather/component/main-info/index";
import RecentDayInfo from "@/views/weather/component/recent-day-info/index";
import HourInfo from "@/views/weather/component/hour-info/index";
import OtherInfo from "@/views/weather/component/other-info/index";
import ForecastVideo from "@/views/weather/component/forecast-video/index";
import LifeInfo from "@/views/weather/component/life-info/index";
import Divider from "@/components/divider/index";
import WeatherBg from "@/views/weather/component/weather-bg/index";
import FlexBox from "@/components/flex-box/index";

export default {
  name: "Weather",
  components: {
    FlexBox,
    WeatherBg,
    Divider,
    LifeInfo,
    ForecastVideo,
    OtherInfo,
    HourInfo,
    RecentDayInfo,
    MainInfo,
    TitleBar
  },
  data() {
    return {}
  },
  methods: {},

  created() {

  },

  mounted() {

  },

  destroyed() {
    console.log('weather.vue destroyed');
    window.removeEventListener('scroll', () => {});
    window.removeEventListener('touchstart', () => {});
    window.removeEventListener('touchmove', () => {});
    window.removeEventListener('touchend', () => {});
  }

}
</script>

<style scoped>
.weather-container {
  width: 100%;
  height: 100%;
}

.height-100vh {
  height: 100vh;
}

.p-lr-24px {
  padding-left: 24px;
  padding-right: 24px;
}
</style>
